<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="czkkform"
            :rules="rules"
            :model="czkkform"
            label-width="100px"
            class="flex"
          >
            <el-form-item label="创建时间" prop="Time">
              <el-date-picker
                v-model="czkkform.Time"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="czkktime"
              />
            </el-form-item>
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select
                v-model="czkkform.networkNameId"
                placeholder="请选择网点"
                style="width: 286px"
              >
                <el-option
                  v-for="(item, index) in czkknetworkList"
                  :key="index"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="账户类型">
              <el-select
                v-model="czkkform.accountType"
                placeholder="请选择账户类型"
                style="width: 286px"
              >
                <el-option
                  v-for="(item, index) in zhtype"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="账户名称">
              <el-input v-model="czkkform.accountName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button class="cx" @click="czkkcx">查询</el-button>
              <elbutton :obj="czkkform" @dj="czkkcz" />
            </el-form-item>
            <el-form-item label="交易类型">
              <el-select
                v-model="czkkform.transactionType"
                placeholder="请选择交易类型"
                style="width: 286px"
              >
                <el-option label="全部" :value="0" />
                <el-option label="充值" :value="1" />
                <el-option label="提现" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select
                v-model="czkkform.auditStatus"
                placeholder="请选择审核状态"
                style="width: 286px"
              >
                <el-option label="全部" :value="0" />
                <el-option label="已审核" :value="1" />
                <el-option label="未审核" :value="2" />
                <el-option label="已驳回" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建人">
              <el-input v-model="czkkform.createBy" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="审核人">
              <el-input v-model="czkkform.updateBy" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          当前页共<span>{{ czkktableData.length }}</span
          >项
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button class="cx">查询</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable
          :loading="czkkloading"
          :data="czkktableData"
          :th="czkkth"
          :n="3"
        />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="czkkform.pageDate.pageNum"
        :page-size="czkkform.pageDate.pageSize"
        :total="czkktotal"
        @size-change="czkkhandleSizeChange"
        @current-change="czkkhandleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { Getczkktable } from '@/api/site'
export default {
  props: {
    zhtype: Array,
    rules: Object

  },
  data() {
    return {
      czkkloading: false,
      czkknetworkList: [],
      // 充值扣款审核
      czkkform: {
        accountName: '',
        accountType: 0,
        auditStatus: 0,
        createBy: '',
        endTime: '',
        networkNameId: '辽宁盘锦公司',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        transactionType: 0,
        updateBy: ''
      },
      czkktableData: [],
      czkktotal: 0,
      czkkth: []
    }
  },
  async created() {
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.czkknetworkList = res.data
        }
      })
    },
    // 获取时间
    czkktime(value) {
      if (value != null) {
        this.czkkform.startTime = value[0]
        this.czkkform.endTime = value[1]
      } else {
        this.czkkform.startTime = ''
        this.czkkform.endTime = ''
      }
    },
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // },
    async czkkcx() {
      this.$refs.czkkform.validate(async valid => {
        if (valid) {
          this.czkkloading = true
          const res = await Getczkktable(this.czkkform)
          console.log('下载管理查询', res)
          this.czkkloading = false
          if (res.code === 200) {
            this.czkktableData = res.data.list.data
            this.czkktotal = res.data.list.total
            this.czkkth = res.data.fields
          } else {
            this.czkktableData = []
            this.czkktotal = 0
          }
        } else {
          return false
        }
      })
    },
    czkkhandleSizeChange(val) {
      this.czkkform.pageDate.pageSize = val
      this.czkkform.pageDate.pageNum = 1
      this.czkkcx()
    },
    czkkhandleCurrentChange(val) {
      this.czkkform.pageDate.pageNum = val
      this.czkkcx()
    },
    // 重置
    czkkcz(aaa) {
      this.czkkform = aaa
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../css/css.css');
</style>
